<template>
    <div>
        <el-upload ref="fileUploadRef" :multiple="multiple" :file-list="fileList"
            :action="uploadFileUrl" :headers="headers"
            :drag="drag" :limit="limit" :disabled="disabled || fileList.length >= limit"
            :show-file-list="showFileList" :auto-upload="auto"
            :on-success="uploadSuccess" :before-upload="uploadBefore"
            :on-error="uploadError" >
            <slot>
                <div class="width-all text-gray font-sm upload_button" v-if="drag" v-loading="uploading">
                    <i class="icon-base icon-base-add-bold" style="font-size: 30px;"></i>
                    <p class="margin-top-sm">{{ label || '点击上传' }}</p>
                </div>
                <el-button type="primary" class="oper_button upload_button" :loading="uploading" v-else
                    :class="{ 'hidden_upload': hidden }">
                    <i class="icon-base icon-base-upload margin-right-sm"></i>{{ label || '选取文件' }}
                </el-button>
            </slot>
        </el-upload>
    </div>
</template>
<script setup>
    // 上传套件Plus 
    import { ref } from "vue"
    import { getToken } from "@/utils/auth";
    // multiple: 是否多选[boolean]   fileType: 文件支持格式[Array]  fileSize:文件大小限制单位MB[number|string]
    // showFileList: 是否显示文件上传列表[boolean]  drag：是否开启拖拽[boolean]    limit：允许最大上传数量[number]
    // disabled: 是否禁用[boolean]   auto：是否自动上传
    const props = defineProps( [ 'modelValue', 'multiple', 'fileType', 'fileSize', 'showFileList', 'drag', 
    'limit', 'disabled', 'auto', 'label', 'hidden' ] );
    const emit = defineEmits( [ 'update:modelValue', 'finish' ] );
    const { proxy } = getCurrentInstance();
    const fileUploadRef = ref(null);
    const headers = ref({ Authorization: "Bearer " + getToken() });
    const uploadFileUrl = ref( import.meta.env.VITE_APP_BASE_API + "/file/upload" );
    const fileList = ref(props.modelValue || []);
    const uploading = ref(false);
    // 非点击式触发上传 使用隐藏模式时请关闭drag拖拽
    const selectFileUpload = () => {
        fileUploadRef.value.$el.querySelector('.upload_button').click();
    };
    // 上传前格式校验/大小限制等
    const uploadBefore = (file) => {
        // 限制文件类型
        if(props.fileType && props.fileType.length > 0){
            const fileName = file.name.split('.');
            const fileExt = fileName[fileName.length - 1];
            const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
            if (!isTypeOk) {
                proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件`);
                return false;
            }
        }
        // 校检文件大小
        if (props.fileSize) {
            const isPass = file.size / 1024 / 1024 < Number(props.fileSize);
            if (!isPass) {
                proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB`);
                return false;
            }
        }
        uploading.value = true;
        return true
    };
    const uploadSuccess = (res, file) => {
        if(res.code == 200 && res.data){
            fileList.value.push(res.data)
        }
        emit('finish', res, file);
        emit('update:modelValue', fileList.value)
        uploading.value = false;
    };
    // 上传失败
    const uploadError = (err) => {
        proxy.$modal.msgError("上传文件失败");
    }
    defineExpose({selectFileUpload});
</script>
<style scoped lang="scss">
    :deep(.el-upload-dragger){
        padding: 20px 10px;
        min-width: 200px;
    }
    .hidden_upload{
        opacity: 0;
    }
</style>